<template>
  <view class="order-record">
    <uni-list>
      <uni-list-item v-for="(order,index) in orders" :key="order.id">
        <uni-card :title="`订单 ${index + 1}`" isShadow>
          <view class="order-item">
            <view class="item-row">
              <text class="label">订单编号</text>
              <text class="value">{{ order.order_sn }}</text>
            </view>
            <view class="item-row">
              <text class="label">下单时间</text>
              <text class="value">{{ formatTime(order.create_time, 'yyyy-MM-dd hh:mm:ss') }}</text>
            </view>
            <view class="item-row">
              <text class="label">状态</text>
              <text :class="order.status === '已结算' ? 'status-settled' : 'status-unsettled'">{{ order.status }}</text>
            </view>
            <view class="item-row">
              <text class="label">订单金额</text>
              <text class="value">¥<text class="money">{{ order.order_amount }}</text></text>
            </view>
            <view class="item-row">
              <text class="label">我的收入</text>
              <text class="value">¥<text class="money">{{ order.income }}</text></text>
            </view>
            <view class="item-row">
              <text class="label">商家收入</text>
              <text class="value">¥<text class="money">{{ order.shop_income || '0.00' }}</text></text>
            </view>
          </view>
        </uni-card>
      </uni-list-item>
    </uni-list>
	<view style="padding-top: 200rpx;" v-if="orders.length === 0">
		<u-empty text="暂无商家收入订单记录" mode="order"></u-empty>
	</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [],
				loading: false,
				error: null,
				page: 1,
				pageSize: 10,
				total: 3,
				hasMore: false,
			}
		},
		onLoad() {
			this.loadOrders();
		},
		methods: {
			formatTime(time, format = 'yyyy-MM-dd HH:mm:ss') {
				return this.$u.timeFormat(time, format)
			},
			loadOrders() {
				this.loading = true;
				this.$u.api.recommend.getCommissionList().then(res => {
					this.orders = res.data;
					this.loading = false;
				}).catch(err => {
					this.error = err.message;
					this.loading = false;
				});
			}
		}
	}
</script>

<style scoped>
.order-record {
  padding: 24rpx 30rpx;
  background: #F6F8F7;
}

/* 订单卡片样式 */
.uni-card {
  margin-bottom: 20rpx;
}

.order-item {
  padding: 30rpx;
  margin-bottom: 24rpx;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.label {
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.value {
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.value .money{
	margin-left: 9rpx;
}

.status-settled {
  color: #1DC57C; /* 已结算状态绿色 */
}

.status-unsettled {
  color: #ff5722; /* 未结算状态红色（可自定义） */
}
.empty-income-info {
	text-align: center;
	padding: 30rpx;
	background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
}
.empty-desc {
	font-size: 24rpx;
	color: #cccccc;
}
.empty-desc text {
	display: block;
	margin-bottom: 10rpx;
}
.empty-desc text:last-child {
	margin-bottom: 0;
}
.empty-desc text:first-child {
	margin-bottom: 10rpx;
}
</style>
